import React, { useEffect, useState } from "react"
import { Outlet, useLocation, NavLink, useNavigate } from "react-router-dom"

import './home.css'
import linkmap from './link.js'

export default () => {

    // template

    let TEMPLATE;
    if (React) {
        TEMPLATE = () => (
            <>
                <div className="leftbtn" style={{ display: leftshow == 1 ? 'none' : 'block' }} onClick={() => setIfleftclick(props => 1)}>&equiv;</div>
                <div className="leftfix" style={{ left: leftshow == 1 ? '0' : ifleftclick == 1 ? '0' : '-280px' }}>
                    <div className="leftclose" style={{ display: leftshow == 1 ? 'none' : 'block' }} onClick={() => setIfleftclick(props => 0)}>×</div>
                    <div className="leftcont">
                        <div style={{ paddingBottom: 20 }}>
                            {linkmap.link.map((v, i) => (
                                <>
                                    <div key={i} className="leftitem" style={{ color: linkid == v.id ? 'blue' : '', animation: "none", left: 0, opacity: 1 }} onClick={() => links(v)}>
                                        {linkid == v.id ? <div style={{ float: 'left', width: 3, height: 20, backgroundColor: 'red' }}></div> : <div style={{ float: 'left', width: 3, height: 20, backgroundColor: 'transparent' }}></div>}
                                        <div className="leftitem" style={{ padding: 0, marginLeft: 20, animationDelay: i * 200 + 'ms' }}> {v.name}</div>
                                    </div>
                                </>
                            ))}
                        </div>
                    </div>
                </div>
                <div className="cont" style={{ marginLeft: leftshow == 1 ? '280px' : '0' }}>
                    {ifoutletshow ? <Outlet /> : ''}
                </div>
            </>
        )
    }

    // route

    const navigate = useNavigate()

    // data

    const [load, setLoad] = useState(0)
    const [domsetflag, setDomsetflag] = useState(0)//domsetflag开关打开
    const [leftshow, setLeftshow] = useState(1)
    const [ifleftclick, setIfleftclick] = useState(0)
    const [route, setRoute] = useState(useLocation())
    const [query, setQuery] = useState(() => {
        var temp = route.search && route.search.split('?')[1].split('&') || []
        var tempobj = {}
        for (var i = 0; i < temp.length; i++) {
            tempobj[temp[i].split('=')[0]] = temp[i].split('=')[1]
        }
        return tempobj
    })
    const [ifoutletshow, setIfoutletshow] = useState(1)
    const [linkid, setLinkid] = useState(0)
    const [param, setParam] = useState(() => {
        var id = route.pathname && route.pathname.split('id_')[1] || -1
        return id
    })

    //methods

    const tosetdom = () => {
        if (!domsetflag) {
            setDomsetflag((props) => 1)//domsetflag开关关闭
            //
            if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) > 800) {
                setLeftshow(props => 1)
            } else {
                setLeftshow(props => 0)
            }
            //
            setTimeout(() => {
                setDomsetflag((props) => 0)//domsetflag开关打开
            }, 100)
        }
    }

    const setdom = () => {
        tosetdom()
        window.addEventListener('resize', () => {
            tosetdom()
        })
    }

    //

    const links = (v) => {
        navigate('/home/id_' + v.id, { replace: true })
        setLinkid(() => v.id)
        setIfleftclick(props => 0)
        setIfoutletshow((props) => 0)
        setTimeout(() => {
            setIfoutletshow((props) => 1)
        })
    }

    const getlinkinit = () => {
        if (param != -1) {
            for (var i = 0; i < linkmap.link.length; i++) {
                if (linkmap.link[i].id == param) {
                    setLinkid(() => param)
                }
            }
        }
    }

    //mounted

    const mounted = () => {

        if (!load) {
            setLoad((props) => 1)
            //其他处理
            setdom()
            getlinkinit()
        }

    }

    const destroyed = () => {

    }

    //钩子

    useEffect(() => {

        //mounted

        mounted()

        //destroyed

        return destroyed

    }, [])

    //updated

    useEffect(() => {
        tosetdom()
    }, [leftshow])

    const fnVoid = () => { }
    const simpleupdate = [
        [ifleftclick],
        [domsetflag]
    ]
    //
    for (var i = 0; i < simpleupdate.length; i++) {
        useEffect(fnVoid, simpleupdate[i])
    }

    /* ### */

    return TEMPLATE()
}